<template>
  <div class="flex-h flex-vc flex-hsb wrapper">
    <img :src="icon" />
    <div
      class="flex-v flex1 flex-hs info-wrapper"
      @click="pushToMyInfoPage"
    >
      <span>美丽的小丑</span>
      <div>
        <span class="level">认证设计师</span>
      </div>
    </div>
    <i class="icon iconfont icon-rightangel"></i>
  </div>
</template>

<script>
import { open } from '@/utils/JumpUtils.js'
import { getUserInfo } from 'vue-xiaobu-utils'
export default {
  data() {
    return {
      username: '',
      icon: ''
    }
  },
  methods: {
    pushToMyInfoPage() {
      open('module=city-app&page=personalinfo&needLogin=true')
    },
    _getUserInfo() {
      this.username = getUserInfo().NICK_NAME
      this.icon = require((getUserInfo().ICON))
    }
  },
  mounted() {
    this._getUserInfo()
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
  height: 240px;
  background: #fff;
}

.wrapper > img {
  width: 140px;
  height: 140px;
  border-radius: 100%;
  margin: 0px 30px;
  border: none;
  background: #dedede;
}
.wrapper > i {
  margin-right: 30px;
}
.info-wrapper > span:first-of-type {
  font-size: 16px; /*no*/
  font-weight: bold;
  line-height: 22px; /*no*/
}
.level {
  font-size: 11px; /*no*/
  line-height: 40px;
  background: #28acff;
  color: #fff;
  margin-top: 22px;
  height: 40px;
  border-radius: 22px;
  padding: 0px 14px;
}
</style>
